<template>
  <view class="root">
    <view class="top">
      <view class="inner">
        <uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
          @monthSwitch="monthSwitch" />

        <view class="count-wrapper" @click="handleToRecord">
          <view class="c-left">
            <text class="month-t">{{moment(currentTime).format('MM')}}月吃药统计</text>
            <text class="month-day">{{monthCount}}</text>
          </view>
          <image class="more-icon" :src="$baseImgUrl + 'right-more.png'"></image>
        </view>

        <view class="care-item" v-for="(item, index) in helpList" :key="index" @click="handleToDetail(item)">
          <view class="item-title">
            {{moment(currentTime).format('MM月DD日')}}*吃药记录*
          </view>
          <view class="item-i">
            <view class="item-label">
              药品名称:
            </view>
            <view class="item-value">
              {{item.medicineName}}
            </view>
          </view>
          <view class="item-i">
            <view class="item-label">
              吃药时间:
            </view>
            <view class="item-value">
              {{item.helpTime}}
            </view>
          </view>
          <view class="item-i">
            <view class="item-label">
              吃药地点:
            </view>
            <view class="item-value">
              {{item.helpAddress}}
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="bottom">
      <u-button text="新增吃药记录" :custom-style="halfColorButton" @click="handleAdd"></u-button>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    monthMedicineRecords
  } from '../api/api'
  import {
    getOptionsParams,
    halfColorButton,
    isLoading,
    navTo
  } from '@/utils/util.js'

  import lodash from '@/utils/lodash.js'
  import moment from '../utils/moment'

  export default {
    data() {
      return {
        $baseImgUrl: this.$baseImgUrl,
        info: {
          lunar: true,
          range: true,
          insert: false,
          selected: [],
        },
        halfColorButton,
        routerParams: {},
        currentTime: new Date().getTime(),
        helpList: [],
        monthCount: 0,
        // 表示当前用户选中的时间，只表示点选
        selectedTime: new Date().getTime()
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.getRecord(moment(this.currentTime).valueOf())
      uni.$on('addOk', () => {
        this.getRecord(moment(this.currentTime).valueOf())
      })
    },
    onUnload() {
      uni.$off('addOk')
    },
    methods: {
      moment,
      change(e) {
        console.log('change 返回:', e)
        // 模拟动态打卡
        let timeStr = moment(e.fulldate).format('YYYY-MM-DD')
        let resItem = this.details[timeStr]
        this.selectedTime = timeStr
        this.monthCount = resItem.monthCount
        this.currentTime = moment(e.fulldate).valueOf()
        this.helpList = lodash.get(resItem, 'wbMedicineRecordsBean', [])
      },
      monthSwitch(e) {
        let selectedTimeStr = moment(this.selectedTime).format('YYYY-MM')
        let time = moment(`${e.year}-${e.month}`).format('YYYY-MM')
        let timeValue = moment(time).valueOf()
        // 如果上次选择的在当前月份，则下面去当前天的进行展示
        if (selectedTimeStr === time) {
          this.currentTime = moment(this.selectedTime).valueOf()
        } else {
          this.currentTime = timeValue
        }
        this.getRecord(this.currentTime)
      },
      handleAdd() {
        navTo({
          url: '/wristWatch/takeMedicineAdd',
          params: {
            ...this.routerParams
          }
        })
      },
      getRecord(time) {
        const params = {
          mentalPatientId: this.routerParams.id,
          time
        }
        isLoading(true)
        monthMedicineRecords(params)
          .then((res) => {
            this.details = res.result
            // 取出当天的 数字
            let timeStr = moment(time).format('YYYY-MM-DD')
            let resItem = this.details[timeStr]
            this.monthCount = resItem.monthCount
            this.helpList = lodash.get(resItem, 'wbMedicineRecordsBean', [])
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleToRecord() {
        navTo({
          url: '/wristWatch/takeMedicineRecord',
          params: {
            ...this.routerParams,
            time: this.currentTime
          }
        })
      },
      handleToDetail(item) {
        navTo({
          url: '/wristWatch/takeMedicineDetail',
          params: {
            ...item
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    background: #F9F9F9;

    display: flex;
    flex-direction: column;

    .top {
      flex: 1;
      padding: 14rpx 16rpx;
      min-height: 0;
      overflow: auto;
    }

    .bottom {
      height: 120rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24rpx;

      /deep/.u-button__text {
        font-weight: bold;
        font-size: 32rpx;
        color: #2488F5;
      }
    }

    .inner {
      width: 100%;
      display: flex;
      flex-direction: column;

      .count-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 45rpx 26rpx;
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-top: 10rpx;
        margin-bottom: 10rpx;

        .c-left {
          display: flex;
          align-items: center;

          .month-t {
            font-weight: bold;
            font-size: 30rpx;
            color: #1A1A1A
          }

          .month-day {
            font-weight: bold;
            font-size: 36rpx;
            color: #2488F5;
            margin-left: 16rpx;
          }
        }

        .more-icon {
          width: 19rpx;
          height: 33rpx;
        }

      }


      .care-item {
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 33rpx 42rpx 26rpx 42rpx;
        margin-bottom: 10rpx;

        .item-title {
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          margin-bottom: 30rpx;
        }

        .item-i {
          display: flex;
          margin-bottom: 14rpx;

          .item-label {
            font-weight: 500;
            font-size: 28rpx;
            color: #A1A1A1;
            flex-shrink: 0;
          }

          .item-value {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            margin-left: 16rpx;
          }

        }
      }
    }
  }
</style>